<template>
    <div>
        <input type="text" placeholder="输入框" v-if="isShow" ref="a">
        <button @click="btn" v-else>点击搜索</button>
    </div>
</template>

<script>
// 点按钮（按钮自动消失）- 输入框自动出现并聚焦
export default {
	data() {
		return {
            isShow: false,
        };
	},
    methods: {
        // 第一种写法
        // btn () {
        //     this.isShow = true;
        //     this.$nextTick(() => {
        //         this.$refs.a.focus();
        //     })
        // },
        // 第二种写法
        async btn () {
            this.isShow = true;
            await this.$nextTick();
            this.$refs.a.focus();
        },
        
    }
};
</script>

<style scoped>
input,
button {
    width: 200px;
    height: 50px;
}
</style>